<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.css" />
		<script src="js/utils.js" type="text/javascript" charset="UTF-8"></script>
	</head>

	<body>
		<div class="indexweb">
			<div class="music">
				<audio id="music" src="music/Valentin - A Little Story.mp3" loop="loop" autoplay></audio>
				<img id="musicImg" src="images/music5.png" "musicImg" class="yiny" />
			</div>
			<div class="indexbox">
				<div class="indexhead">
					<img src="images/logo_03.png" alt="" />
				</div>
				<div class="indexmiddle-text">
					<img src="images/index01_07.png" alt="" />
					<img src="images/index02_11.png" alt="" />
				</div>
				<div class="indexbottom1">
					<div class="baig"></div>
					<p>
						定制我的囍宴
					</p>
				</div>
				<div class="indexbottom">
					<div class="baig1"></div>
					<p>
						<a href="plat.html">我要免费领囍酒</a>
					</p>
				</div>
				<div class="indexbomb">

				</div>

			</div>
		</div>

		<div class="bomb">
			<div class="dj">
				<!--style="width:100%;-->
				<div class="imgs"><img src="images/dx_10.jpg" /></div>
				<p>定制专属囍宴</p>
				<p>邀请宾客入席</p>
				<p>抢999元现金贺礼!</p>
				<div class="btu">
					<button>查看活动规则</button>
				</div>

			</div>
		</div>
		<div class="AR-web">
			<div class="AR-box">
				<div class="AR-text">
				</div>
			</div>
			<!--底部-->
			<footer class="footer">
				<div class="fenX">
					<a href="WeddingFeast.html">生成囍宴，分享喜事</a>
				</div>
				<div class="fanH">
					<a href="index.html"></a>
				</div>
			</footer>
		</div>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="UTF-8"></script>
		<script src="js/jquery.transit.js" type="text/javascript" charset="utf-8"></script>
		<script>
			//查看活动
			var chaK = true;
			$(".btu button").on("touchstart", function() {
				if(chaK) {
					a_chaK();
				} else {
					b_chaK();
				}
			})

			function a_chaK() {
				var dingZ = false;
				$(".AR-web").css("transform", "translateY(0)");
				$(".bomb").transit({
					"opacity": "0"
				}, function() {
					$(".bomb").transit({
						"z-index": -1
					})
				})
			}

			function b_chaK() {
				var dingZ = true;
				$(".dj").css("transform", "translateY(-100%)");
			}
			//点击弹框js
			var zhuanS = true;
			$(".bomb .dj .imgs").on("touchstart", function() {
				GuanBdingZhi();
			})
			var dingZ = true;
			$(".indexbottom1 p").on("touchstart", function() {
				if(dingZ) {
					dingZhi();
				}
			})

			function dingZhi() {
				var dingZ = false;
				$(".dj").css("transform", "translateY(0)");
				$(".bomb").css("z-index", "3");
				$(".bomb").transit({
					"opacity": "1"
				})
			}

			function GuanBdingZhi() {
				var dingZ = true;
				$(".dj").css("transform", "translateY(-100%)");
				$(".bomb").transit({
					"opacity": "0"
				}, function() {
					$(".bomb").transit({
						"z-index": -1
					})
				})
			}
			$(".music").on("touchstart", function() {
				var audio = $("audio")[0];
				if(audio.paused) {
					audio.play() //暂停
				} else {
					audio.pause(); //播放
				}
			})
			var yiny = true;
			$(".music").on("touchstart", function() {
				if(yiny) {
					$("#musicImg").css("animation-play-state", "paused");
					yiny = false;
				} else {
					$("#musicImg").css("animation-play-state", "inherit");
					yiny = true;
				}
			})
			$(document).ready(function() {
				$(".indexhead").transit({
					rotateX: 0
				}, 1000)
				$(".indexbottom").transit({
					x: 0
				})
				$(".indexbottom1").transit({
					x: 0
				})
				$(".indexmiddle-text").transit({
					"scale": 1,
					"opacity": 1
				}, 400)
			})
		</script>
	</body>

</html>